<template>
  <div id="app">
    <div class="container">
      <div class="close">
        <span class="iconfont iconicon-test" @click="$router.go(-1)"></span>
      </div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <myinput
          placeholder="请输入手机号"
          class="input"
          :rules="
            /(^\d{5}$)|(^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$)/
          "
          v-model="user.username"
          msg="输入有误，输入5位或11位电话号码"
        />
        <myinput
          placeholder="密码"
          class="input"
          type="password"
          :rules="/^\S{3,16}$/"
          v-model="user.password"
          msg="你输入的密码格式不正确"
        />
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <mybutton res="success" @click="logon">登录</mybutton>
      <!-- <van-button type="primary" class="but_success">主要按钮</van-button> -->
    </div>
    <!-- <VanButton>fgdfgdfgdg</VanButton> -->
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<script>
import mybutton from "@/components/mybuttom";
import myinput from "@/components/myinput";
// 引入封装好的api login
import { login } from "@/apis/user";
// import axios from "@/utils/myaxios";
// import axios from "axios";
export default {
  components: {
    mybutton,
    myinput,
  },
  data() {
    return {
      user: {
        username: "10086",
        password: "123",
      },
    };
  },
  methods: {
    // async 表示函数有异步操作
    async logon() {
      // 进行正则验证，不好的格式就会筛选调，再进行axios调用
      if (
        /(^\d{5}$)|(^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$)/.test(
          this.user.username
        ) &&
        /^\S{3,16}$/.test(this.user.password)
      ) {
        let res = await login(this.user);
        // await：
        // 1.可以获取当前操作的返回结果
        // 2.await可以让后续的操作等待，只是执行完当前使用await标记的方法之后才会执行后续的操作
        console.log(res);
        // 得到res数据就要判断  res.data.status
        if (res.data.message == "登录成功") {
          this.$toast.success(res.data.message);
          // 把token存到本地存储
          window.localStorage.setItem("toutiao_token", res.data.data.token);
          // 再把id存了，在首页可以渲染出关注列表
          // window.localStorage.setItem("toutiao_id", res.data.data.user.id);
          // 在这里我直接存整个对象，就要先转json字符串
          window.localStorage.setItem(
            "toutiao_user",
            JSON.stringify(res.data.data.user)
          );
          // 再跳转到个人中心  拿上id号，个人中心进行页面渲染
          // console.log(res.data.data.user.id);
          // if (this.$route.query.redirectURL) {
          if (
            decodeURIComponent(window.location.hash.split("=")[1]) &&
            // 这个有可能值为undefined 也不能跳转
            decodeURIComponent(window.location.hash.split("=")[1]) !=
              "undefined"
          ) {
            console.log(decodeURIComponent(window.location.hash.split("=")[1])); //  /articaldetail/12
            //   /#/login?redirectURL=%2Farticaldetail%2F12
            this.$router.push({
              path: decodeURIComponent(window.location.hash.split("=")[1]),
            });
            // this.$router.go(-1);
          } else {
            this.$router.push({ path: `/personal/${res.data.data.user.id}` });
          }
        } else {
          this.$toast.fail("请输入正确的账号密码");
        }
      } else {
        this.$toast.fail("账号密码格式不正确");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
.but_success {
  width: 320 /360 * 100vw;
  background-color: #2897ff;
  height: 40px;
  margin: 0 auto;
  color: #fff;
  border: 0;
  font-size: 20px;
  outline: 0;
  border-radius: 20px;
}
</style>